<template>
	
	<view class="boder-box p-10">
		<view style="height: 600rpx; position: relative" class="shadow border-radius  bg-white p-10 pt-30 ">
			<view class="flex flex-j-between" style="flex-basis: 100%; position: absolute; top: 5px; right: 10px">
		
				<view v-if="edit" class="ml-15">
					<text @click="signatureRef.init()" class="font-bold text-color-link">清空</text>
					<text @click="signatureRef.save()" class="font-bold text-color-link ml-5">保存</text>
					<text @click="
		    edit = false;
		    signatureRef.init();
		  " class="font-bold text-color-link ml-5 base-text-info">取消</text>
				</view>
		
				<view v-else class="ml-15">
					<text @click="edit = true" class="font-bold text-color-link base-text-info">编辑签名</text>
				</view>
			</view>
			<image v-if="!edit" style="width: 100%; height: 100%" :src="signUrl">
			</image>
		
			<draw v-else ref="signatureRef" background="#fff" color="black" size="6" @onSave="onSave"></draw>
		</view>
		
	</view>
	
</template>

<script setup lang="ts">
	import draw from "../../components/xiaobai-draw/xiaobai-draw.vue";
	import {
		ref,
		onMounted
	} from "vue";
	import {
		getSign
	} from "./api";
	import {
		Toast
	} from "@/utils/uniHooks/toast";
	import {
		baseUrl
	} from "@/utils/httpInterceptor";
	import {
		postAttachmentTempUpload
	} from "@/utils/upload";

	const signatureRef = ref <any>();
	const edit = ref(false);
	let signUrl = ref("");

	const setUrl = async () => {
		let tempSign: any = await getSign();
		if (tempSign?.data?.attachmentUrl) {
			signUrl.value = `${baseUrl}${tempSign.data.attachmentPath}`;
			edit.value = false;
		}
	};

	onMounted(() => {
		setUrl();
	});

	const onSave = async (file:string) => {
		console.log("file = " + file);
		uni.showLoading();
		const resV = (await postAttachmentTempUpload(
			file,
			`${baseUrl}/organization/user/sign/upload`
		)) as any;

		if (resV.code === "0") {
			Toast("修改签名成功");

			setUrl();
		} else {
			Toast(resV.msg);
		}
	};
</script>

<style lang="scss" scoped>
	page,
	view {
		font-size: $uni-font-size-sm;
	}

	page {
		background-color: #f8f8f8;
	}

	.center {
		flex-direction: column;
	}

	.logo {
		height: 240rpx;
		padding: 20rpx;
		box-sizing: border-box;
		background-color: $uni-color-primary;
		flex-direction: row;
		align-items: center;
	}

	.logo-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 150rpx;
	}

	.logo-title {
		height: 150rpx;
		flex: 1;
		align-items: center;
		justify-content: space-between;
		flex-direction: row;
		margin-left: 20rpx;
	}

	.uer-name {
		height: 60rpx;
		line-height: 60rpx;
		color: #ffffff;
	}

	.login-title {
		height: 150rpx;
		align-items: self-start;
		justify-content: center;
		flex-direction: column;
		margin-left: 20rpx;
	}

	.center-list {
		margin-top: 20rpx;
		flex-direction: column;
		font-size: $uni-font-size-sm;
	}

	.btn-row {
		position: absolute;
		bottom: 20px;
		right: 0;
		left: 0;
		width: 80%;
		margin: auto;
		background-color: $uni-color-primary;
		border-radius: 8rpx;
		color: #ffffff;
		font-size: $uni-font-size-base;

		:hover {
			background-color: $uni-color-primary;
		}
	}
</style>
